<template>
    <el-row class="active-detail">
        <div class="add-type">
            <span>{{form.id!=='add'?'修改活动':'新建活动'}}</span>
        </div>
        <el-form ref="form" class="o-form" label-position="right" label-width="120px" :model="form" :rules="rules">
            <el-form-item label="活动名称:" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="开放时间:" prop="openTime">
                <el-date-picker v-model="openTime" type="date" @change="timeChange" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="活动说明:">
                <el-input type="textarea" :rows="6" v-model="form.intro"></el-input>
            </el-form-item>
            <el-form-item label="是否启用:">
                <el-radio v-model="form.isUse" :label="1">是</el-radio>
                <el-radio v-model="form.isUse" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item class="opt-btn">
                <el-button :disabled="addDisabled" type="primary" class="height-btn" @click="sure">确定</el-button>
                <el-button class="light-btn" @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</template>
<script>
import Upload from '../common/Upload'
import VPagination from '../common/Pagination'
import { mapState, mapActions } from 'vuex'
import io from 'lib/io'
import util from 'lib/util'
export default {
    components: {
        Upload,
        VPagination
    },
    data() {
        return {
            addDisabled: false,
            form: {
                id: this.$route.params.id,
                name: '',
                openTime: '',
                intro: '',
                isUse: 1
            },
            openTime: '',
            rules: {
                name: [{ required: true, message: '活动名称不能为空！', trigger: 'change' }, { max: 40, message: '活动名称不能超过40字', trigger: 'change' }],
                openTime: [{ required: true, message: '请选择开放时间！', trigger: 'change' }],
            },
        }
    },
    created() {
        if (this.form.id !== 'add') {
            this.detailExamModelActivity({ id: this.form.id })
        }
    },
    methods: {
        ...mapActions([]),
        async detailExamModelActivity(opt){
            let {data}=await io.post6(io.detailExamModelActivity,opt)
            if(data.success){
                let openTime=util.formatDate(data.data.openTime,'YYYY-MM-DD H:mm:ss')
                data.data.openTime=openTime
                this.openTime=openTime
                this.form=data.data
            }
        },
        timeChange() {
            this.form.openTime = util.formatDate(this.openTime, 'YYYY-MM-DD H:mm:ss')
        },
        sure() {
            this.addDisabled = true
            setTimeout(() => {
                this.addDisabled = false
            }, 2000)
            this.$refs.form.validate((vali) => {
                if (this.form.intro.length > 200) {
                    this.$message('活动说明长度在200内')
                    return
                }
                if (vali) {
                    if (!String.trim(this.form.name).length) {
                        this.$message('名称不允许只输入空格')
                        return
                    }
                    this.addOrUpdateActive()
                } else {
                    this.$message('您还有必填项未填！')
                    return
                }
            })
        },

        async addOrUpdateActive() {
            let id = this.form.id === 'add' ? '' : this.form.id
            let url = this.form.id === 'add' ? io.addExamModelActivity : io.editExamModelActivity
            let { data } = await io.post6(url, { ...this.form, id, pId: this.checkItem })
            if (data.success) {
                this.$message({ message: '保存成功', type: 'success' })
                if (this.form.id === 'add') {
                    this.$router.push({ path: '/main/exam/test-paper', query: { activeId: data.data.id ,activeName:data.data.name} })
                } else {
                    this.$router.go(-1)
                }
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.active-detail
    .has-course-btn
        margin-top 30px
    .add-type
        height 45px
        line-height 45px
        // margin 15px 50px 0
        margin-top 30px
        text-align left
        button
            float right 
            margin-top 7.5px
        .el-button
            background #1ebd99
            color #ffffff
            font-size 14px
            border 1px solid #1ebd99
            border-radius 15px
            height 30px
    .gray
        table-form()
        padding-top 15px
        padding-right 20px
        padding-bottom 10px
        .el-form-item
            margin-bottom 0
    .o-form
        padding 0 200px
        margin auto
        margin-top 50px
        .el-select
            width 100%
            
    .head
      margin-top 10px
    .free-num
        margin-left 10px
        font-style normal
    .personal
        border 0
        color #606266
        &:hover
            background transparent
    .opt-btn
        text-align center
        margin-top 40px
    .surport
        color #ff7800
        padding-left 40px
.has-course
    // padding 20px 50px 
    .t-form
      padding 22px 20px 0 20px
      background #f7f7f7
      .el-select
        width 120px
    .search-table
      padding 20px 20px 0 20px

</style>
<style lang="stylus">
.data-detail .gray
    .el-form-item__label,.el-form-item__content
        line-height 30px
        font-size 14px
        font-weight normal 
.table-radio
    .el-radio__label
        display none
.add-has
    .el-dialog
        width 60%
        min-width 740px


</style>


